<!--政治面貌||文化程度||身高-->
<template>
  <!--  政治面貌-->
  <div>
    <van-cell required title="政治面貌"/>
    <van-field
      is-link
      readonly
      clickable
      name="politics"
      :value="value"
      placeholder="点击选择政治面貌"
      @click="showPicker = true"
      :rules="[{ required: true, message: '请选择政治面貌' }]"
    />
    <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!--文化程度-->
    <van-cell required title="文化程度"/>
    <van-field
      is-link
      readonly
      clickable
      name="education"
      :value="value2"
      placeholder="点击选择文化程度"
      @click="showPicker2 = true"
      :rules="[{ required: true, message: '请选择文化程度' }]"
    />
    <van-popup v-model="showPicker2" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
        show-toolbar
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="showPicker2 = false"
      />
    </van-popup>
    <!--    身高-->
    <van-cell required title="身高"/>
    <van-field
      v-model="height"
      name="height"
      placeholder="例如：180"
      clearable
      :rules="[{ required: true, message: '请填写身高' }]"
    />
  </div>
</template>

<script>

export default {
  name: 'content2',
  data () {
    return {
      value: '',
      value2: '',
      showPicker: false,
      showPicker2: false,
      // 政治面貌
      columns: [],
      // 教育程度
      columns2: [],
      height: ''
    }
  },
  methods: {
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    onConfirm2 (value) {
      this.value2 = value
      this.showPicker2 = false
    }
  },
  mounted () {
    const that = this
    // 请求后台教育程度数据
    this.$ajax.get('api/v1/options').then(function (res) {
      const data = res.data.data
      const education = data.education
      const politics = data.politics
      for (const i in education) {
        that.columns2.push(education[i])
      }
      for (const i in politics) {
        that.columns.push(politics[i])
      }
    }).catch(function (err) {
      console.log(err)
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
